<template>
    <div class="info">
       <h1>月亮与六便士</h1>
       <p>贫穷的纠缠，贫瘠的折磨他的意识...</p> 
    </div>
    <swiperphoto :pic="pics1"></swiperphoto>
    <div class="info">
        <h1>夜晚也很美</h1>
        <p>屋内明黄色的灯光让气氛变得温和...</p> 
    </div>
    <swiperphoto :pic="pics2"></swiperphoto>
</template>
<script>
    import {reactive,toRefs} from 'vue'
    import swiperphoto from '../../components/swiper.vue'
        
    export default {
        components:{
            swiperphoto
        },
        setup(){
            const moon1=require('../../assets/moon1.png')
            const moon2=require('../../assets/moon2.png')
            const moon3=require('../../assets/moon3.png')
            const moon4=require('../../assets/moon4.png')
            const moon5=require('../../assets/moon5.png')
            const other1=require('../../assets/other1.png')
            const other2=require('../../assets/other2.png')
            const other3=require('../../assets/other3.png')
            const other4=require('../../assets/other4.png')
            const other5=require('../../assets/other5.png')
            const state=reactive({
                pics1:[moon1,moon2,moon3,moon4,moon5],
                pics2:[other1,other2,other3,other4,other5]
            })
            return{
                 ...toRefs(state),
                 moon1,moon2,moon3,moon4,moon5,
                 other1,other2,other3,other4,other5
            }
        }
        
    };
</script>

<style scoped>
.info h1{
    margin-left: 15px;
    margin-top: 10px;
}
.info p{
    font-size: 12px;
    color: rgba(128,128,128,0.6);
    margin-left: 15px;
    margin-top: 6px;
}
</style>